<template>
  <div class="aside-bar">
    <!-- 1.logo -->
    <!-- <div class="logo">
      <img class="img" src="/src/assets/img/logo/LogoIcon-Black4.png" alt="" />
      <h2 v-show="!isFold" class="title">VT后台管理系统</h2>
    </div> -->
    <div class="newLogo" @click="routerJump('push', 'Home')">
      <img class="img" src="/src/assets/img/logo/Logo-Black4.png" alt="" />
    </div>

    <!-- 
          el-menu组件的分析
          1.el-menu 整菜单
          2.el-sub-menu 可以有子菜单，并且是可以展开的
          3.el-menu-item-group 
            对子菜单进行分组的，但是不能展开
            目的是给小菜单加上组的名称，但是不能交互
            #title插槽 表示一个标题
          4.el-menu-item 
            可以点击每一个item
       -->
    <div class="menu">
      <el-menu
        :default-active="defaultActive"
        :collapse="isFold"
        text-color="#79869e"
        active-text-color="#409eff"
        background-color="#fff"
      >
        <template v-for="typeItem in animalTypes" :key="typeItem.id">
          <!-- <el-sub-menu :index="typeItem.typeId">
            <template #title>
              <i
                :class="'iconfont ' + typeItem.typeIcon"
                style="font-size: 22px; margin-right: 8px"
              ></i>
              <span>{{ typeItem.typeName }}</span>
            </template>
            <template v-for="subItem in item.children" :key="subItem.id">
              <el-menu-item :index="subItem.id + ''" @click="handleItemClick(subItem)">
                {{ subItem.name }}</el-menu-item
              >
            </template>
          </el-sub-menu> -->
          <el-menu-item :index="typeItem.typeId + ''" @click="handleItemClick(typeItem)">
            <template #title>
              <i
                :class="'barTitle iconfont icon-' + typeItem.typeIcon"
                style="font-size: 22px; margin-right: 8px; color: #79869e"
              ></i>
              <span>{{ typeItem.typeName }}动物</span></template
            >
          </el-menu-item>
        </template>
      </el-menu>
    </div>
  </div>
</template>

<script setup lang="ts">
import useRouterJump from "@/hooks/useRouterJump"
import useDatabasesStore from "@/store/main/databases/databases"
import type { IAnimalType } from "@/types"
import { storeToRefs } from "pinia"
import { ref, watchEffect } from "vue"

const emit = defineEmits(["asideChange"])

// 定义props

interface IProps {
  isFold?: boolean
  cancelDefaultActive?: boolean
}

const props = withDefaults(defineProps<IProps>(), {
  isFold: false,
  cancelDefaultActive: false
})

const dataBaseStore = useDatabasesStore()
dataBaseStore.getAnimalTypes().then(() => {})
const { animalTypes } = storeToRefs(dataBaseStore)

// 2.监听item的点击
function handleItemClick(item: IAnimalType) {
  // console.log(item)
  emit("asideChange", item.typeId)
}

// const defaultActive = ref(animalTypes[0]?.typeId + "")
let defaultActive = ref("1")

// 路由跳转
const { routerJump } = useRouterJump()

watchEffect(() => {
  if (props.cancelDefaultActive) {
    defaultActive.value = ""
  }
})

defineExpose({ defaultActive })
</script>

<style lang="less" scoped>
.aside-bar {
  height: 100%;
  // background-color: #001529;
  background-color: #fff;
  position: relative;
  top: 0;
  left: 0;
}

.logo {
  display: flex;
  height: 28px;
  padding: 12px 10px 8px 10px;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;

  .img {
    width: 26px;
    height: 26px;
    margin: 0 4px;
  }

  .title {
    font-size: 16px;
    font-weight: 700;
    color: white;
    white-space: nowrap;
    color: #0a043c;
  }
}

.newLogo {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 0;
  cursor: pointer;
  .img {
    width: 120px;
    height: 100%;
  }
}

.el-menu {
  border-right: none;
  //控制用户能否选中文本
  user-select: none;
}

.el-menu {
  .el-menu-item {
    padding: 0 40px !important;
  }

  .el-menu-item:hover {
    color: #409eff !important;
    background-color: #ecf5ff;
    // .barTitle {
    //   color: #fff !important;
    // }
    font-weight: 600;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.12);
  }

  .el-menu-item.is-active {
    font-weight: 600;
    // background-color: #ecf5ff;
  }

  // .el-menu-item.is-active:hover {
  //   font-weight: 600;
  //   color: #1b6ef3 !important;
  //   background-color: #faf7ff;
  // }
}
</style>
